<template>
  <div ref="codePanel"></div>
</template>

<script>
/* eslint-disable */
import highlight from 'highlight.js'
import 'highlight.js/styles/vs.css'
import 'highlight.js/styles/stackoverflow-dark.css';

/**
 * 代码高亮展示
 *
 * 这个组件有两个参数，同时修改的时候，要先设置 type，再设置 text，
 * 我们只做了一个参数的侦听，只有在修改了text的时候，才会触发侦听。
 *
 * 保持习惯就好，不要尝试优化，这是为了避免重复触发 reload() 函数。
 */
export default {
    name: "SeaCode"
    , props: {
        // 代码类型：javascript, xml, html...
        type: {type: String, default: 'html'}
        // 代码
        , text: {type: String, default: undefined}
    }
    , watch: {
        text: {
            handler: function (txt) {
                this.reload();
            }
        }
    }
    , mounted() {
        if (this.text !== undefined) {
            this.reload();
        }
    }
    , methods: {
        reload: function () {
            if (this.$refs.codePanel) {
                this.$refs.codePanel.innerHTML = '<pre style="margin:0"><code class="' + this.type + '">' + this.text + '</code></pre>';
                this.$refs.codePanel.querySelectorAll('pre code').forEach((block) => {
                    highlight.highlightBlock(block)
                })
            }
        }
    }
}
</script>
